
const { createApp,onMounted, onUnmounted, ref ,reactive} = Vue


const App = {
    setup() {
        const form = ref({
            name: '',
            desc: '',
        })
        const state = reactive({
            score: 5,
            license: true,
        })

        const successTheme = {
            '--rate-primary-color': 'var(--color-success)',
            '--button-primary-color': 'var(--color-success)',
            '--switch-handle-active-background': 'var(--color-success)',
            '--switch-track-active-background': 'var(--color-success)',
        }

        const styleVars = ref(null)

        function toggleTheme() {
            styleVars.value = styleVars.value ? null : successTheme
        }
        // 使用API管理器，无需手动定义host
        // const host = "http://api.webxd.top"
        const host = "http://127.0.0.1:5700"
        const searchInput = ref("")
        const input3 = ref('')
        const select = ref('')
        const query = reactive({
            page: 0,
            rows: 36,
            id:'',
            type:'',
        });
        const pageTotal = ref(0);
        const iconList = ref([
            {
                type:-1,
                img:'./resource/img/blank.png'
            },
            {
                type:1,
                img:''
            },
            {
                type:2,
                img:'./resource/img/txt.png'
            },
            {
                type:3,
                img:'./resource/img/word.png'
            },
            {
                type:4,
                img:'./resource/img/excel.png'
            },
            {
                type:5,
                img:'./resource/img/pdf.png'
            },
            {
                type:6,
                img:'./resource/img/mp3.png'
            },
            {
                type:7,
                img:'./resource/img/video.png'
            },
            {
                type:8,
                img:'./resource/img/zip.png'
            },
            {
                type:9,
                img:'./resource/img/exe.png'
            },
            {
                type:10,
                img:'./resource/img/shell.png'
            },
            {
                type:11,
                img:'./resource/img/js.png'
            },
            {
                type:12,
                img:'./resource/img/msi.png'
            },
            {
                type:13,
                img:'./resource/img/apk.png'
            },
            {
                type:14,
                img:'./resource/img/ipd.png'
            },
            {
                type:15,
                img:'./resource/img/html.png'
            },
            {
                type:16,
                img:'./resource/img/sql.png'
            }
        ])

        const activeFileType = ref('all')
        const fileDataList = ref([])
        const title = "我的云盘空间";
        const dialogImageUrl = ref('');
        const dialogVisible = ref(false);
        const disabled = ref(false);
        const fileList = ref([]);
        const imagePreviewList = ref([])
        const imagePreviewId = ref(0)
        // 多媒体预览状态
        const multiPreviewVisible = ref(false)
        const multiPreviewIndex = ref(0)
        const handleRemove = (file) => {
            console.log(file)
        }
        const show = ref(false)
        const showMessage = () => {
            ElementPlus.ElMessage({
                message: '这是一条信息',
                type: 'success',
            })
        }

        const handleFileTypeChange= function (fileType) {
            query.type = fileType
            query.page = 0
            getFileInfo()
        }

        const upLoadFile = function() {
            dialogVisible.value = true
        }
        const clickShow = function(index) {
            const file = fileDataList.value[index]
            
            // 检查是否支持多媒体预览
            if (file.type === 1 || file.type === 6 || file.type === 7) {
                // 使用新的多媒体预览组件
                multiPreviewIndex.value = index
                multiPreviewVisible.value = true
                console.log("多媒体预览:", file.file_name, "类型:", file.type)
            } else {
                // 对于图片仍可以使用原有的图片预览（作为备选）
                if (file.type === 1) {
                    let imageIndex = 0
                    for (let i = 0; i < index; i++) {
                        if (fileDataList.value[i].type === 1) {
                            imageIndex++
                        }
                    }
                    imagePreviewId.value = imageIndex
                    show.value = true
                    console.log("使用原图片预览，索引:", imageIndex)
                } else {
                    // 不支持的文件类型
                    ElementPlus.ElMessage({
                        message: '此文件类型暂不支持预览',
                        type: 'info',
                    })
                    console.log("不支持预览:", file.file_name, "类型:", file.type)
                }
            }
        }
        const getFileInfo = function() {
            // 使用新的API接口管理器
            API.files.getList({
                page: query.page,
                rows: query.rows,
                file_type: query.type,
            }).then(function(response) {
                if (response.isSuccess()) {
                    const responseData = response.getData();
                    fileDataList.value = responseData.data || responseData; // 兼容不同的响应格式
                    
                    console.log("API响应数据:", responseData)
                    console.log("文件列表处理前:", fileDataList.value)
                    
                    // 处理文件列表，设置图标
                    for( i in fileDataList.value){
                        for( j in  iconList.value ){
                            file_i = fileDataList.value[i]
                            icon_j = iconList.value[j]
                            if (file_i.type !==1){
                                if (file_i.type === icon_j.type){
                                    file_i.cover = icon_j.img
                                    fileDataList.value[i] = file_i
                                }
                            }
                        }
                        if(file_i.type===1){
                            imagePreviewList.value.push(file_i.cover)
                            for( k in  imagePreviewList.value ){
                                file_i.image_id =  Number(k);
                            }
                        }
                    }
                    
                    // 设置分页总数
                    pageTotal.value = responseData.total || responseData.thisnum || 0;
                    
                    console.log("文件列表处理后:", fileDataList.value)
                    console.log("图片预览列表:", imagePreviewList.value)
                } else {
                    // API调用失败，显示错误信息
                    ElementPlus.ElMessage({
                        message: response.getError(),
                        type: 'error',
                    })
                    console.error('获取文件列表失败:', response.getError())
                }
            })
        }
        const handlePictureCardPreview = (file) => {
            dialogImageUrl.value = file.url
            dialogVisible.value = true
        }
        const handleDownload = (file) => {
            console.log(file)
        }
        // 分页导航
        const handlePageChange = (val) => {
            query.page = val-1;
            getFileInfo();
        };

        // 每页显示条数
        const handleSizeChange = (val) => {
            query.rows = val;
            getFileInfo();

        };
        // 挂载时的操作
        onMounted(() => {
            console.log('组件已挂载');
            getFileInfo()
            // 执行需要的操作，例如发送请求获取数据
        });

        // 卸载时的操作
        onUnmounted(() => {
            console.log('组件已卸载');
            // 执行需要的清理操作，例如取消定时器
        });
        return {
            form,
            dialogImageUrl,
            dialogVisible,
            disabled,
            fileList,
            title,
            searchInput,
            input3,
            select,
            fileDataList,
            query,
            pageTotal,
            show,
            imagePreviewId,
            imagePreviewList,
            multiPreviewVisible,
            multiPreviewIndex,
            host,
            handleFileTypeChange,
            handlePageChange,
            handleSizeChange,
            handleRemove,
            showMessage,
            clickShow,
            handlePictureCardPreview,
            handleDownload,
            getFileInfo,
            upLoadFile
        }
    }
}
const app = createApp(App);
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
    app.component(key, component)
}
app.component('Plus', ElementPlusIconsVue.Plus)

// 注册多媒体预览组件
if (window.MultiMediaPreview) {
    app.component('MultiMediaPreview', window.MultiMediaPreview)
    console.log('MultiMediaPreview component registered')
} else {
    console.warn('MultiMediaPreview component not found')
}

app.use(ElementPlus);
app.use(Varlet)
app.mount("#app");


